<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />

<title>DeathGhost-用户中心</title>
<meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发" />
<meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!" />
<meta name="author" content="DeathGhost"/>
<link href="/style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/public.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
   <script type="text/javascript" src="/js/jqpublic.js"></script>
 <script src="/js/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <!-- 引入 layui.css -->
 <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
 <!-- 引入 layui.js -->
 <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>-->


<!--
Author: DeathGhost
Author URI: http://www.deathghost.cn
-->
</head>
<body>
<header class="header">


</header>
<script>

 $('.header').load('/header.html',function(responseTxt,statusTxt,xhr){


 })
 $(function () {
  $(function () {
  $('.menu1').load('/menu.html',function(responseTxt,statusTxt,xhr){
   console.log('responseTxt,statusTxt,xhr')

  })
 })
 })

</script>
<!--Start content-->
<section class="Psection MT20">
<nav class="menu1">

 </nav>

 <article class="U-article Overflow" id="address1">
  <!--user Address-->
  <section class="Myaddress Overflow">

   <div class='tabs'>

    <div class="uc_title m_10 tabs_menu">
     <span class="MDtitle Font14 FontW Block Lineheight35">地址管理</span>
    </div>
    <div class='tabs_content'>
     <div id="address_list" class="form_content m_10 node">
      <div class="MDtitle Font14 FontW Block Lineheight35">
       <strong>已保存的有效地址</strong>
      </div>
      <table class="MDtitle Font14 FontW Block Lineheight35" width="100%" cellpadding="0"
             cellspacing="0" th:data="addresses">
       <col width="120px" />
       <col width="120px" />
       <col width="120px" />
       <col width="120px" />
       <col width="240px" />
       <col width="120px" />
       <col width="150px" />
       <col />
       <thead>
       <tr>
        <th>收货人</th>
        <th>省份</th>
        <th>城市</th>
        <th>区域</th>
        <th>街道地址</th>
        <th>手机</th>
        <th>操作</th>
       </tr>
       </thead>
       <tbody>
       <tr v-for="address in addresses">
        <td>{{address.person}}</td>
        <td>{{address.province}}</td>
        <td>{{address.city}}</td>
        <td>{{address.district}}</td>
        <td>{{address.address}}</td>
        <td>{{address.phone}}</td>
        <!--<td><a class="blue" href='javascript:void(0)' @click='update(address)' id="update" >修改</a>|

         <a class="Font14 Font Lineheight35" href="javascript:void(0)" onclick="del()">删除</a>|
         <a class="Font14 Font Lineheight35" href="javascript:void(0)" onclick="setDefaultadd()">设为默认</a>
        </td>-->
        <td>
         <div v-if="address.status == 'y'">
          <a class="Font14 Font Lineheight35" href="javascript:void(0)"
             @click="initUpdate(address.id)"><span
                  class="icon-edit"></span> 修改</a>
          默认地址
         </div>
         <div v-if="address.status == 'n'">
          <a class="Font14 Font Lineheight35" href="javascript:void(0)"
             @click="initUpdate(address.id)"><span
                  class="icon-edit"></span> 修改</a>
          <a class="Font14 Font Lineheight35" href="javascript:void(0)"
             @click="del(address.id)"><span class="icon-trash-o"></span> 删除</a>
          <a class="Font14 Font Lineheight35" href="javascript:void(0)"
             @click="setDefault(address.id)"><span class="icon-trash-o"></span> 设为默认</a>
         </div>
        </td>
       </tr>
       </tbody>
      </table>
     </div>
    </div>
   </div>

   <span class="MDtitle Font14 FontW Block Lineheight35">收货人信息</span>

   <form action="/address/add" method="post" :model="form">
    <table style="margin-top:10px;">
     <tr>
      <th><span class="red">*</span> 所在地区：</th>
      <td><select v-model="provinceId" @change="getCity(provinceId)">
       <option :value="p.id" v-for="p in provinces">
        {{p.region}}
       </option>
      </select>
       <select v-model="cityId" @change="getDistrict(cityId)">
        <option :value="c.id" v-for="c in cities">
         {{c.region}}
        </option>
       </select> <select
               v-model="districtId">
        <option :value="d.id" v-for="d in districts">
         {{d.region}}
        </option>
       </select></td>
     </tr>

    <tr>
     <td width="30%" class="Font14 FontW Lineheight35" align="right">收件人姓名：</td>
     <td><input type="text" v-model="form.person" name="person" required  class="input_name"></td>
    </tr>
    <tr>
     <td width="30%" class="Font14 FontW Lineheight35" align="right">街道地址：</td>
     <td><input type="text" v-model="form.address" name="address" required  class="input_addr"></td>
    </tr>
    <tr>
     <td width="30%" class="Font14 FontW Lineheight35" align="right">手机号码：</td>
     <td><input type="text" v-model="form.phone" name="phone" required pattern="[0-9]{11}" class="input_tel"></td>
    </tr>
     <tr>
      <td width="30%" class="Font14 FontW Lineheight35" align="right">设为默认：</td>
      <td><label><input name="status" id="status" type='checkbox'
                        value='y' v-model="status"></label></td>
     </tr>
    <tr>
     <td width="30%" class="Font14 FontW Lineheight35" align="right"></td>
     <td class="Font14 Font Lineheight35"><input name="" @click="save" type="button" value="保存" class="Submit"></td>
    </tr>

   </table>
   </form>
  </section>
 </article>

</section>
<!--End content-->
<div class="F-link">
  <span>友情链接：</span>
  <a href="http://www.deathghost.cn" target="_blank" title="DeathGhost">DeathGhost</a>
  <a href="http://www.17sucai.com/pins/15966.html" target="_blank" title="免费后台管理模板">绿色清爽版通用型后台管理模板免费下载</a>
  <a href="http://www.17sucai.com/pins/17567.html" target="_blank" title="果蔬菜类模板源码">HTML5果蔬菜类模板源码</a>
  <a href="http://www.17sucai.com/pins/14931.html" target="_blank" title="黑色的cms商城网站后台管理模板">黑色的cms商城网站后台管理模板</a>
 </div>
<footer>
 <section class="Otherlink">
  <aside>
   <div class="ewm-left">
    <p>手机扫描二维码：</p>
    <img src="/images/Android_ico_d.gif">
    <img src="/images/iphone_ico_d.gif">
   </div>
   <div class="tips">
    <p>客服热线</p>
    <p><i>1830927**73</i></p>
    <p>配送时间</p>
    <p><time>09：00</time>~<time>22:00</time></p>
    <p>网站公告</p>
   </div>
  </aside>
  <section>
    <div>
    <span><i class="i1"></i>配送支付</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">支付方式</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送方式</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务费用</a></li>
    </ul>
    </div>
    <div>
    <span><i class="i2"></i>关于我们</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
    </ul>
    </div>
    <div>
    <span><i class="i3"></i>帮助中心</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务内容</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">常见问题</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">网站地图</a></li>
    </ul>
    </div>
  </section>
 </section>
<div class="copyright">© 版权所有 2016 DeathGhost 技术支持：<a href="http://www.deathghost.cn" title="DeathGhost">DeathGhost</a></div>
</footer>
</body>
<script>
 $(function() {
  /*$('#distpicker').distpicker({
   autoSelect: false //是否自动选中项
  });*/

  new Vue({
   el: "#address1",
   /*delimiters: ['{[', ']}'],*/
   data() {
    return {
     provinces:[],
     cities:[],
     districts:[],
     addresses: [],
     provinceId:'',
     cityId:'',
     districtId:'',
     opr:'add',
     status:'',
     form: {
      provinceId: '',
      cityId: '',
      districtId: '',
      person: '',
      address: '',
      addressId:'',
      phone: '',
      status: '',
     },
    }
   },

   methods: {
    getCity: function(id){
      axios.post("/region/getCitys", {
      parentId: id
     }).then(r => {
      if (r.data.code === 200) {
       this.cities = r.data.data;
       this.districtId="";
      }
     });
    },

    getDistrict: function (id) {
     axios.post("/region/getDistrict", {
      parentId: id
     }).then(r => {
      if (r.data.code === 200) {
       this.districts = r.data.data;
      }
     });
    },

    initUpdate:function(id) {
      this.opr="update";
      axios.get("/address/initUpdate?id="+id).then(r => {
          if (r.data.code ===200) {
           this.form.person=r.data.data.person;
           this.provinceId=r.data.data.provinceId;
           this.cityId=r.data.data.cityId;
           this.districtId=r.data.data.districtId;
           axios.post("/region/getCitys",{
            parentId:this.provinceId
           }).then(r => {
            if (r.data.code === 200) {
             this.cities=r.data.data;
             console.log(this.cities)
            }
           });
           axios.post("/region/getDistrict",{
            parentId:this.cityId
           }).then(r => {
            if (r.data.code === 200) {
             this.districts = r.data.data;
             console.log(this.districts)
            }
           });
           this.form.address = r.data.data.address;
           this.form.phone = r.data.data.phone;
           this.addressId = id;
           if(r.data.data.status == "y"){
            this.status = true;
           }else if (r.data.status == "n") {
            this.status = '';
           }
          }
      });
    },

    del:function(id) {
     layer.confirm("确认删除吗？",{
         icon: 3,
         title:'删除提示'},()=>{
         axios.get("/address/del?id="+id).then(r =>{
          if(r.data.code === 200){
           this.addresses = r.data.data;
           layer.closeAll('dialog');
          }
         })
        })
    },

    clear: function () {
     this.form.person = "";
     this.provinceId = "请选择";
     this.districtId = "请选择";
     this.cityId = "请选择";
     this.form.address = "";
     this.form.phone = "";
     this.status = "";
    },


    setDefault:function(id) {
     axios.get("/address/setdefault?id="+id).then(r =>{
      if (r.data.code === 200) {
       layer.msg('设置默认地址成功',{
        icon: 1,
        time: 1500
       },() => {
        axios.get("/address/show").then(r=>{
         if (r.data.code === 200) {
          this.addresses = r.data.data;
         }
        });
       })
      }
     })
    },

    toUpdate(){
     //回显数据

     //更改操作数为更新，save方法执行更新
     this.opr='update';
    },

    save() {

     if (this.status == true) {
      this.status = "y";
     } else {
      this.status = "n";
     }
     if('add'==this.opr){
     let address={

      provinceId: this.provinceId,
      cityId:this.cityId,
      districtId: this.districtId,
      person:this.form.person,
      address:this.form.address,
      phone:this.form.phone,
      status:this.status
     }

     axios.post("/address/add", address).then(r => {
      if (r.data.code === 200) {
       layer.msg("增加成功", {
        icon: 1,
        time: 1500
       }, () => {
        console.log(this.person+" "+this.address+" "+this.phone)
        this.clear();
        axios.get("/address/show").then(r=>{
         if (r.data.code === 200) {
          this.addresses = r.data.data;
         }
        });
       })
      } else if (r.data.code === 500) {
       layer.msg("最多只能存在五个地址",{
        icon: 7,
        time: 1500
       },() =>{
        this.clear();
        this.addresses = r.data.data;
       })
      }
     })
    } else if("update"==this.opr){
      let address={
       provinceId: this.provinceId,
       cityId:this.cityId,
       districtId: this.districtId,
       person:this.form.person,
       address:this.form.address,
       phone:this.form.phone,
       status:this.status,
       id:this.addressId
      }
      axios.post("/address/update",address).then(r =>{
       if (r.data.code === 200) {
        layer.msg('修改成功',{
         icon: 1,
         time: 1500
        },()=>{
         this.clear();
         this.addresses = r.data.data;
         this.opr = "add";
        })
       }
      })
     }
/*    else if('update'==this.opr){
     //发送update请求
    }*/
    },
   },

   mounted() {
    axios.get("/address/show").then(r => {
     if (r.data.code === 200) {
      this.addresses = r.data.data;
      this.provinceId="请选择"
      this.cityId="请选择"
      this.districtId="请选择"
     }
    }).catch(err=>{
     console.log(err)
    });

    axios.post("/region/getProvinces",{
      pid: null
    }).then(r => {
     if (r.data.code === 200) {
      this.provinces = r.data.data;
     }
    })

   }
  });
 });
</script>
</html>
